<template>
  <Pannel>
    <div class="bg"></div>
    <Navbar theme="dark">结单信息</Navbar>
    <div class="complete_info">
      <Card class="card" header>
        <template #header>
          <div class="top">
            <div class="bar"></div>
            <div class="title">录入信息</div>
          </div>
        </template>

        <!-- 主体部分 -->
        <div class="content">
          <div class="field">
            <span class="name">客户号码: {{ detail.customerPhone }}</span>
          </div>
          <div class="field">
            <span class="name">录入时间</span>
            <span class="value">{{ detail.preparedTime }}</span>
          </div>
          <div class="field">
            <span class="name">录入用户</span>
            <span class="value" v-if="store[dictNames.USER_ID_LIST]">{{
              matchDictItem(store[dictNames.USER_ID_LIST], detail.preparedBy)
                ?.text
            }}</span>
          </div>
          <div class="field">
            <span class="name">单元区域</span>
            <span class="value">{{ detail.unit }}</span>
          </div>
          <div class="field">
            <span class="name">客户标识</span>
            <span class="value">{{ detail.customerTag }}</span>
          </div>
          <div class="field">
            <span class="name">集团类别</span>
            <span class="value">{{ detail.groupType }}</span>
          </div>
          <div class="field">
            <span class="name">集团名称</span>
            <span class="value">{{ detail.groupName }}</span>
          </div>
          <div class="field">
            <span class="name">客户需求</span>
            <span class="value">{{ detail.customerDemand }}</span>
          </div>
          <div class="field">
            <span class="name">问题描述</span>
            <span class="value">{{ detail.description }}</span>
          </div>
        </div>
      </Card>

      <Card class="card" header>
        <template #header>
          <div class="top">
            <div class="bar"></div>
            <div class="title">转派信息</div>
          </div>
        </template>

        <!-- 主体部分 -->
        <div class="content">
          <div class="field">
            <span class="name">被转派人</span>
            <span class="value" v-if="store[dictNames.USER_ID_LIST]">{{
              matchDictItem(store[dictNames.USER_ID_LIST], detail.transferBy)
                ?.text
            }}</span>
          </div>
          <div class="field">
            <span class="name">转派时间</span>
            <span class="value">{{ detail.transferTime }}</span>
          </div>
        </div>
      </Card>

      <Card class="card" header>
        <template #header>
          <div class="top">
            <div class="bar"></div>
            <div class="title">处理信息</div>
          </div>
        </template>

        <!-- 主体部分 -->
        <div class="content">
          <div class="field">
            <span class="name">处理方式</span>
            <span class="value">{{ detail.dealMethod }}</span>
          </div>
          <div class="field">
            <span class="name">处理意见</span>
            <span class="value">{{ detail.dealOpinion }}</span>
          </div>
        </div>
      </Card>

      <Card class="card" header>
        <template #header>
          <div class="top">
            <div class="bar"></div>
            <div class="title">结单信息</div>
          </div>
        </template>

        <!-- 主体部分 -->
        <div class="content">
          <!-- 添加表单容器和ref引用 -->
          <van-form ref="formRef">
            <DPicker
              v-model="formData.customerSatisfied"
              is-link
              readonly
              label="客户意见"
              placeholder="请选择"
              :required="true"
              :rules="rules.customerSatisfied"
              :list="CUSTOMER_COMMENT"
            />
            <DPicker
              v-model="formData.overState"
              is-link
              readonly
              label="是否结单"
              placeholder="请选择"
              :required="true"
              :rules="rules.overState"
              :list="STATEMENT_ACCOUNT"
            />
          </van-form>
        </div>
      </Card>

      <div class="footer">
        <van-button
          class="button"
          type="primary"
          round
          block
          @click="submitFormData"
          >确认结单</van-button
        >
      </div>
    </div>
  </Pannel>
</template>

<script setup>
import useDict from "@/store/dict.js";
import dictNames from "@/config/dict.js";
import { STATEMENT_ACCOUNT, CUSTOMER_COMMENT } from "@/config/dict.js";

import { matchDictItem } from "@/utils/index.js";

import {
  showLoadingToast,
  closeToast,
  showSuccessToast,
} from "@/utils/toast.js";
import { omscFind, omscClose } from "@/api/index";
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, onMounted } from "vue";

const route = useRoute();
const router = useRouter();

const id = route.query.id;
const detail = ref({});
const formData = reactive({
  id: id,
  customerSatisfied: "", // 客户满意
  overState: "", // 是否结单
});

onMounted(async () => {
  showLoadingToast();
  await fetchDatas();
  closeToast();
});

//  加载字典项
const [store, setDict] = useDict();
//  加载当前页面需要的数据
async function fetchDatas() {
  const [result] = await Promise.all([
    omscFind({ id: id }),
    setDict([
      dictNames.USER_ID_LIST,
      dictNames.CUSTOMER_COMMENT,
      dictNames.STATEMENT_ACCOUNT,
    ]),
  ]);

  detail.value = result?.result[0];
}

// 添加验证规则
const rules = {
  customerSatisfied: [{ required: true, message: "请选择是否满意" }],
  overState: [{ required: true, message: "请选择是否结单" }],
};

// 添加表单引用
const formRef = ref();
// 添加提交表单函数
async function submitFormData() {
  try {
    // 触发表单验证
    await formRef.value?.validate();

    // 验证通过，执行提交逻辑
    showLoadingToast("数据提交中...");
    try {
      // 调用实际的转派API
      const { errors } = await omscClose(formData);
      if (errors && errors.length) return;

      showSuccessToast("转派成功");
      // 可选：转派成功后返回上一页或跳转到其他页面
      router.back();
    } catch (submitError) {
      console.error("转派失败:", submitError);
    }
  } catch (validateError) {
    // 验证失败，Vant会自动显示错误信息
    console.log("表单验证失败:", validateError);
  } finally {
    closeToast();
  }
}
</script>

<style lang="scss" scoped>
/* 仅对当前组件内的表单错误信息设置靠右显示 */
:deep(.van-form .van-field__error-message) {
  text-align: right;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 375px;
  height: 160px;
  background: linear-gradient(180deg, #1681fb, #eff3f8);
  z-index: 0;
}

.complete_info {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;

  .card {
    margin-bottom: 16px;

    &:first-child {
      margin-top: 0;
    }

    .top {
      display: flex;

      .bar {
        width: 3px;
        height: 20px;
        background: #1681fb;
        border-radius: 2px;
      }

      .title {
        margin-left: 8px;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .content {
      .field {
        margin-top: 4px;
        display: flex;
        font-size: 13px;

        .name {
          font-weight: 400;
          white-space: nowrap;
        }

        .value {
          margin-left: 10px;
          color: #888;
        }

        &:first-child {
          margin-top: 0;
        }
      }
    }
  }

  .footer {
    margin-top: 20px;
    padding: 0 20px;
    width: 100%;
    height: 102px;

    box-sizing: border-box;
    background: #fff;

    .button {
      margin-top: 16px;
    }
  }
}
</style>